<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单表</title>
    <script type="text/javascript" src="/public/common.js"></script>
    <script type="text/javascript" src="/public/sose/js/checkViewPermissions.js"></script>
    <link rel="stylesheet" type="text/css" href="/templates/config/css/menu.css">
</head>
<body>
<div class="layout-body" id="menu" v-cloak>
    <layout-header></layout-header>
    <div id="wrap">
        <layout-sider></layout-sider>
        <div class="layout-main">
            <!--<div>
                <span><Icon @click.native="collapsedSider" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon></span>
                <Breadcrumb>
                    <Breadcrumb-Item>系统配置</Breadcrumb-Item>
                    <Breadcrumb-Item to="/config/menu">菜单管理</Breadcrumb-Item>
                </Breadcrumb>
            </div>-->
            <div class="qry">
                <div class="first">
                    <!--<div class="butRight">
                        <span class="juinline">
                            菜单项标题:<el-input class="select_input" type="text" v-model="sMenuList.name"
                                            size="medium"></el-input>
                        </span>
                    </div>
                    <div class="butRight">
                        <i-button type="primary" icon="ios-search" @click="filterInMenuList">搜索</i-button>
                        <i-button @click="clearSMenuList">清空</i-button>
                    </div>-->
                    <div class="butRight-button">
                        <i-button type="info" shape="circle" @click="resetRedis">重置缓存</i-button>
                    </div>
                </div>

                <div class="butLeft">
                    <i-button type="primary" @click="openAddMenuModal">新增菜单项</i-button>
                    <i-button @click="openDisableMenuListSelectModal">批量禁用</i-button>
                    <i-button @click="openRemoveMenuListSelectModal">批量删除</i-button>
                </div>
            </div>
            <div>
                <i-table row-key="id" class="table" border height="auto" highlight-row="true"
                         size='small' :columns="column" :data="nowData" :loading="loading"
                         @on-selection-change="onSelectionChange">
                    <template slot-scope="{ row, index }" slot="action">
                        <a class="table-a" @click="openEditMenuListModal(row)">编辑</a>
                        <a class="table-a" @click="openDisableMenuListModal(row)">禁用</a>
                        <a @click="openRemoveMenuListModal(row)">删除</a>
                        <a v-if="row.level === 3" @click="openEditPermissionsModal(row)"><br>请求权限</a>
                    </template>
                </i-table>
                <div class="div-inline-left">
                    <span v-show="selection.length >0">已勾选 {{selection.length}}条</span>
                </div>
            </div>
        </div>

        <Modal v-model="editPermissionsModal" :mask-closable="false" width="80"
               @on-cancel="cancelEditPermissionsModal">
            <p slot="header">
                <span>编辑请求权限</span>
            </p>
            <div class="modal-content">
                <div>
                    <div>
                        <i-input class="search-input" search enter-button placeholder="输入请求路径进行搜索，如(/test/permissionA)"
                                 v-model.trim="permissionSearch" @on-search="getPermissionSearchData"/>
                    </div>
                    <p align="left">请求权限查询列表</p>
                    <i-table class="table" height="auto" highlight-row="true" :loading="permissionSearchLoading"
                             size='small' :columns="permissionSearchColumn" :data="permissionSearchData">
                        <template slot-scope="{ row, index}" slot="action">
                            <i-button @click="addPermissions(row)">添加</i-button>
                        </template>
                    </i-table>
                </div>
                <div style="margin-top: 30px">
                    <p align="left">请求权限列表</p>
                    <i-table class="table" height="auto" highlight-row="true"
                             size='small' :columns="permissionColumn" :data="permissionData"
                             :loading="permissionLoading">
                        <template slot-scope="{ row, index}" slot="action">
                            <i-button @click="removePermissions(row)">删除</i-button>
                        </template>
                    </i-table>
                </div>
            </div>
            <div slot="footer">
                <i-button type="text" size="large" @click="cancelEditPermissionsModal">取消</i-button>
            </div>
        </Modal>

        <!-- 新增模态框 -->
        <Modal v-model="addMenuModal" :mask-closable="false"
               @on-cancel="cancelAddMenu">
            <p slot="header">
                <span>新增菜单项</span>
            </p>
            <div class="modal-content">
                <table class="modal-content-table">
                    <tr>
                        <td>菜单类型:</td>
                        <td>
                            <el-radio-group v-model="menu.type" @change="changeTypeRadio">
                                <el-radio v-for="type in menuTypeList" :label="type.value">
                                    <span>{{type.name}}</span>
                                </el-radio>
                            </el-radio-group>
                        </td>
                    </tr>
                    <tr v-show="menu.type !== 'dir'">
                        <td>父级菜单:</td>
                        <td v-show="menu.type === 'menu'">
                            <el-select class="input" v-model="menu.parentId">
                                <el-option v-for="item in nowData"
                                           :key="item.id"
                                           :label="item.name"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                        </td>
                        <td v-show="menu.type === 'button'">
                            <el-cascader class="input"
                                         placeholder="试试搜索"
                                         :options="menuOption"
                                         v-model="menu.parentId"
                                         :show-all-levels="true"
                                         filterable clearable>
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.label }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>
                        </td>
                    </tr>
                    <tr v-show="menu.type !== 'button'">
                        <td>请求路径:</td>
                        <td>
                            <el-input class="input" v-model.trim="menu.url"
                                      type="text"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>菜单名称:</td>
                        <td>
                            <el-input class="input" v-model.trim="menu.name"
                                      type="text"></el-input>
                        </td>
                    </tr>
                    <tr v-show="menu.type !== 'button'">
                        <td>菜单图标:</td>
                        <td>
                            <el-input class="input" v-model.trim="menu.icon"
                                      type="text"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>菜单排序:</td>
                        <td>
                            <el-input-number class="input" v-model.trim="menu.seq"
                                             :min="1" :max="99"></el-input-number>
                        </td>
                    </tr>
                </table>
            </div>
            <div slot="footer">
                <i-button type="text" size="large" @click="cancelAddMenu">取消</i-button>
                <i-button type="primary" size="large" @click="addMenu">新增</i-button>
            </div>
        </Modal>

        <!-- 编辑模态框 -->
        <Modal v-model="editMenuListModal" :mask-closable="false"
               @on-cancel="cancelEditMenuList">
            <p slot="header">
                <span>编辑菜单项</span>
            </p>
            <div class="modal-content">
                <table class="modal-content-table">
                    <tr>
                        <td>菜单类型:</td>
                        <td>
                            <el-radio-group v-model="menu.type" @change="changeTypeRadio">
                                <el-radio v-for="type in menuTypeList" :label="type.value"
                                          :disabled="type.value !== menu.type">
                                    <span>{{type.name}}</span>
                                </el-radio>
                            </el-radio-group>
                        </td>
                    </tr>
                    <tr v-show="menu.type === 'menu'">
                        <td>父级菜单:</td>
                        <td>
                            <el-select class="input" v-model="menu.parentId">
                                <el-option v-for="item in nowData"
                                           :key="item.id"
                                           :label="item.name"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr v-show="menu.type !== 'button'">
                        <td>请求路径:</td>
                        <td>
                            <el-input class="input" v-model.trim="menu.url"
                                      type="text"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>菜单名称:</td>
                        <td>
                            <el-input class="input" v-model.trim="menu.name"
                                      type="text"></el-input>
                        </td>
                    </tr>
                    <tr v-show="menu.type !== 'button'">
                        <td>菜单图标:</td>
                        <td>
                            <el-input class="input" v-model.trim="menu.icon"
                                      type="text"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>菜单排序:</td>
                        <td>
                            <el-input-number class="input" v-model.trim="menu.seq"
                                             :min="1" :max="99"></el-input-number>
                        </td>
                    </tr>
                    <tr>
                        <td>是否启用:</td>
                        <td>
                            <el-radio-group v-model="menu.enable" size="small">
                                <el-radio-button :label=true>启用</el-radio-button>
                                <el-radio-button :label=false>禁用</el-radio-button>
                            </el-radio-group>
                        </td>
                    </tr>
                </table>
            </div>
            <div slot="footer">
                <i-button type="text" size="large" @click="cancelEditMenuList">取消</i-button>
                <i-button type="primary" size="large" @click="editCheck">修改</i-button>
            </div>
        </Modal>

        <!-- 删除模态框 -->
        <Modal v-model="removeMenuListModal" title="删除菜单项信息"
               @on-ok="removeMenuList">
            <p>确定删除该菜单项？禁用后原有内容将不再进行保存</p>
        </Modal>

        <!-- 批量删除模态框 -->
        <Modal v-model="removeMenuListSelectModal" title="批量删除菜单项信息"
               @on-ok="removeMenuListSelect">
            <p>确定删除当前 {{selection.length}} 条菜单项？禁用后原有内容将不再进行保存</p>
        </Modal>

        <!-- 禁用模态框 -->
        <Modal v-model="disableMenuListModal" title="禁用菜单项信息"
               @on-ok="disableMenuList">
            <p>确定禁用该菜单项？禁用后原有内容将不再进行保存</p>
        </Modal>

        <!-- 批量禁用模态框 -->
        <Modal v-model="disableMenuListSelectModal" title="批量禁用菜单项信息"
               @on-ok="disableMenuListSelect">
            <p>确定禁用当前 {{selection.length}} 条菜单项？禁用后原有内容将不再进行保存</p>
        </Modal>
    </div>
    <div style="clear: both"></div>
    <layout-footer></layout-footer>
</div>

<script type="text/javascript" src="/templates/config/js/menu.js"></script>
</body>
</html>